import React, { Component, Fragment } from 'react';
import { Modal, Button, Form, Input, Select, message, Row, Col } from 'antd';
import Tree from '@/components/address/tree'
import Data from './regionData'
import styles from './index.less'
export default class Region extends React.Component {
    treeSelects = [] //临时记录
    constructor(props) {
        super(props);
        this.state = {
            selectItemsId: [],
            selectItemsName: [],

        }
    }

    componentWillMount() {
        window.Isoption = false;
      }
      componentDidMount() {
        window.Isoption = true;
      }
    handleOk = () => {
        const { _this, selectItem } = this.props;
        const { selectItemsId, selectItemsName } = this.state;
        if (selectItemsId.length < 1){
            message.error('请选择配送地区');
            return;
        }
        _this.setState({ visible: false }, () => {
         
          
            const newDataId = selectItem == null ? Date.now() : selectItem.id
            this.forceUpdate();
            if (selectItem !=null){
                const newData = {
                    id: newDataId,
                    FirstFee: selectItem.FirstFee,
                    FirstAmount: selectItem.FirstAmount,
                    AdditionalFee:selectItem.AdditionalFee,
                    AdditionalAmount: selectItem.AdditionalAmount,
                    RegionIds: selectItemsId,
                    RegionNames: selectItemsName,
                    RegionNamesShow: selectItemsName.join(','),
                }
                _this.handleAdd(newData)
            }else{
                const newData = {
                    id: newDataId,
                    FirstFee: 10,
                    FirstAmount: 1,
                    AdditionalFee: 5,
                    AdditionalAmount: 1,
                    RegionIds: selectItemsId,
                    RegionNames: selectItemsName,
                    RegionNamesShow: selectItemsName.join(','),
                }
                _this.handleAdd(newData)
            }
           
        });
    };
    //由于整个地区插件是由 省份的树组成，所以每次的勾选返回，都必须将八个树的数据组合到一起
    onChecked = (Ids, Names, index) => {

        let tempIds = []
        let tempNames = []
        this.setState({ selectItemsId: [], selectItemsName: [], }, () => {
            this.treeSelects[index] = { Id: Ids, Name: Names };
            this.treeSelects.forEach((value) => {
                value.Id.forEach((regionId) => {
                    tempIds.push(regionId)
                })
                value.Name.forEach((regionName) => {
                    tempNames.push(regionName)
                })
            })

            this.setState({ selectItemsId: tempIds, selectItemsName: tempNames, }, () => {
                console.log(this.state.selectItemsId)
                console.log(this.state.selectItemsName)
            });

        });

    }
    handleCancel = () => {
        const { _this } = this.props;
        _this.setState({ visible: false }, () => {
            this.forceUpdate();
        });
    };


    renderTree = (Data) => {
        let numIndex = 0;
        let trees = []
        Data.forEach((value, index) => {
            let shengfen = []
            let div = <div
                style={{ top: 60 * index + 70 }}
                className={'region'}
            >
                {value.Name}
                {

                    value.Child.map((item, index2) => {
                        numIndex = numIndex;
                        let top = 0;
                        let infoIndex = (index2 + 1) % 3;
                        if (index2 > 2 && infoIndex !==0) {
                            top = 30
                            infoIndex = infoIndex - 1;
                        }else if (index2 > 2 && infoIndex ===0){
                            top = 30
                            infoIndex = 2;
                        }
                    
                        let left = 252 * infoIndex + 60;


                        let shengfenTree = <Tree key={item.Id}
                            index={numIndex}
                            onChecked={this.onChecked}
                            treeData={item}
                            top={top}
                            left={left}
                        />



                        numIndex = numIndex + 1;
                        return shengfenTree;
                    })

                }

            </div>
            trees.push(div)
        })

        return trees;
    }
    render() {
        const { visible, selectItem } = this.props;

        return (
            <div>
                <Modal
                    visible={visible}
                    title="选择地区"
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    width={800}
                    bodyStyle={{ height: '485px' }}
                    className={styles.tree}
                >
                    <div style={{ overflow: 'hidden' }}>
                        {
                            this.renderTree(Data)
                        }
                    </div>
                </Modal>
            </div>
        )
    }
}